<template>
  <el-card class="container">
    <div class="title"></div>
    <div ref="target" class="box"></div>
  </el-card>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
// 渲染图表

/**
 * 初始化 echarts
 */
const target = ref(null)
let mChart = null
onMounted(() => {
  mChart = echarts.init(target.value)
  renderBMap()
})
/**
 * 渲染地图数据
 */
const renderBMap = () => {
  const options = {
    title: {
      text: '昨今日同比接收数据统计'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['昨日', '今日']
    },
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: ['9：00~10:00', '10：00~12：00', '12:00~14:00', '14:00~15:00']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '昨日',
        type: 'bar',
        data: [100, 150, 300, 250, 400, 200],
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: '今日',
        type: 'bar',
        data: [200, 150, 300, 420, 400, 100],
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      }
    ]
  }
  mChart.setOption(options)
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  .title {
    position: absolute;
    top: 28px;
    margin-left: 50%;
    transform: translateX(-50%);
    color: #333;
    font-size: 22px;
    font-weight: bold;
    z-index: 9;
  }
  .box {
    height: 462px;
  }
}
</style>
